<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>DD groups demo</title>
<style>
    .inline-block {
        width: 100px;
        height: 100px;
        display: inline-block;
        zoom: 1;
        *display: inline;
        border: 2px solid #000000;
        margin: 10px;
    }

    .ks-dd-drop-active-valid {
        border: 2px solid green;
    }

    .ks-dd-drop-active-invalid {
        border: 2px solid red;
    }

    .ks-dd-drop-over {
        background: yellow;
    }

    .ks-dd-drag-over {
        background: yellow;
    }
</style>
</head>
<body>
<div id="playground" style="border: 1px solid red;">

    <div id="drop1" class="inline-block">drop1</div>
    <div id="drop2" class="inline-block">drop2</div>

    <div style="margin:10px;"></div>

    <div id="drag1" class="inline-block">drag1</div>
    <div id="drag2" class="inline-block">drag2</div>

</div>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    KISSY.use("dd,node", function (S, DD, Node) {
        var $ = Node.all;
        new DD.Draggable({
            node:"#drag1",
            move:1,
            groups:{
                "g1":1
            }
        });
        new DD.Draggable({
            node:"#drag2",
            move:1,
            groups:{
                "g2":1
            }
        });
        new DD.Droppable({
            node:"#drop1",
            groups:{
                "g1":1
            }
        });
        new DD.Droppable({
            node:"#drop2",
            groups:{
                "g2":1
            }
        });

        var ddm = DD.DDM, xy;

        ddm.on("dragover", function (e) {
            S.log(e.drag.get("node")[0].id + " dragover " + e.drop.get("node")[0].id);
        });

        ddm.on("dragstart", function (e) {
            var drag = e.drag;
            xy = drag.get("node").offset();
        });

        ddm.on("dragdrophit", function (e) {
            e.drag.get("node").offset(e.drop.get("node").offset());
        });


        ddm.on("dragdropmiss", function (e) {
            e.drag.get("node").offset(xy);
        });

    });
</script>
</body>
</html>